<!DOCTYPE html>
<html ng-app="app" lang="en">
    <head>
        <meta charset="UTF-8">
        <title ng-bind="title"></title>
        <link rel="stylesheet" href="../../style/css/bootstrap.css">
        <link rel="stylesheet" href="../../style/css/matrix-style.css">
        <link rel="stylesheet" href="checkbox.css">
        <script src="../../../node_modules/angular/angular.js"></script>
        <script src="../../a.ui.js"></script>
        <script src="checkbox.js"></script>
        <script>
            // bootstrap app
            var app = angular.module('app', ['a.ui']);
            app.run(function ($rootScope, $parse) {
                $rootScope.title = 'CheckBox';
                $rootScope.checked = true;
                $rootScope.hobby = {
                    hb1: {name: '篮球', checked: false},
                    hb2: {name: '足球', checked: false},
                    hb3: {name: '乒乓球', checked: false}
                };
                $rootScope.change = function () {
                    console.log($rootScope.changeEvt);
                };
            });
        </script>
    </head>
    <body>
        <div class="container">
            <h1 class="text-center" ng-bind="title"></h1>
            <div class="ui segment">
                <a-checkbox label="男"></a-checkbox>
            </div>
            <div class="ui segment">
                <a-checkbox label="readOnly" read-only="readOnly"></a-checkbox>
                <div class="ui toggle checkbox">
                    <input id="readOnly" type="checkbox" ng-model="readOnly" class="hidden">
                    <label for="readOnly">readOnly</label>
                </div>
            </div>
            <div class="ui segment">
                <a-checkbox label="disabled" disabled="disabled"></a-checkbox>
                <div class="ui toggle checkbox">
                    <input id="disabled" type="checkbox" ng-model="disabled" class="hidden">
                    <label for="disabled">disabled</label>
                </div>
            </div>
            <div class="ui segment">
                <a-checkbox label="change事件" ng-model="changeEvt" ng-change="change()"></a-checkbox>
            </div>
            <div class="ui segment">
                <a-checkbox ng-model="hobby.hb1.checked" label="篮球"></a-checkbox>
                <a-checkbox ng-model="hobby.hb2.checked" label="足球"></a-checkbox>
                <a-checkbox ng-model="hobby.hb3.checked" label="乒乓球"></a-checkbox>
                <p>
                    爱好: <span ng-repeat="item in hobby track by $index" ng-if="item.checked">{{item.name}}&nbsp;&nbsp;</span>
                </p>
            </div>
        </div>
    </body>
</html>